<template>
  <div class="list-main">
    <van-nav-bar
      left-text="< 返回"
      class="list-title"
      @click-left="backToStatisticsList"
    >
      <template #title>
        <van-icon name="friends" size="25" />
        <span class="list-title"> {{queryParams.departmentName}}-内部排名 </span>
      </template>
    </van-nav-bar>
    <div class="teacherlist-main">
          <div
            v-for="(teacher,index) in teacherList"
            :key="teacher.rankNo"
            is-link
            class="vo-list"
            @click="gotoStatisticsDetail(teacher.teacherId)"
          >

              <span class="custom-title"
                >第{{(queryParams.pageNum-1)*queryParams.pageSize+index+1}}名 {{ teacher.realName }}</span
              >

              <div class="teacher-info">
                <div class="NO">工号：{{ teacher.teacherNo }}</div>
                <div class="score_wrp"> <span class="score"> 全校排名：{{ teacher.rankNo }} </span> | <span class="score">得分： {{ parseFloat(teacher.score!=undefined?teacher.score:0).toFixed(2) }}</span> </div>
              </div>
          </div>
        </div>
        <van-row class="pagination-wrp" gutter="5">
          <van-col span="4" @click="goToFirstPage" style="text-align:center;color: #39a9ed;font-weight:bold;cursor:pointer"><van-icon name="arrow-left" />第一页</van-col>
          <van-col span="16">
            <van-pagination
              v-model="queryParams.pageNum"
              :total-items="total"
              :show-page-size="5"
              @change="paginationChange"
            >
            </van-pagination>
          </van-col>
          <van-col span="4"  @click="goToLastPage"  style="text-align:center;color: #39a9ed;font-weight:bold;cursor:pointer">最后一页 <van-icon name="arrow" /></van-col>
        </van-row>
  </div>
</template>

<script>
import { listTeacherStatistics } from "@/api/pingjiao/statistics";
import { Toast } from "vant";
export default {
  name: "StatisticsListInDept",
  data() {
    return {
      evalutionActivityId: 0,
      deptName:'',
      teacherList: [
        // {
        //   courseClassNo: null,
        //   courseName: null,
        //   deptName: "",
        //   rankNo: 1,
        //   realName: "",
        //   score: 100,
        //   teacherId: 1,
        //   teacherNo: "",
        // },
      ],
      loading: false, //列表加载中
      error: false, //列表加载出错
      finished: false, //列表加载完成
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        teacherName: null,
        departmentName: null,
        evalutionActivityId: null,
      },
    };
  },
  created() {
    this.$emit("show", -1); //传递给父组件改变tab的激活active样式
    this.queryParams.evalutionActivityId =
      this.$route.query.evalutionActivityId;
      this.queryParams.departmentName =
      this.$route.query.deptName;
    this.deptId =
      this.$route.query.deptId;
      this.getTeacherList()
  },
  watch: {},
  methods: {
    getTeacherList() {
      let that = this;
      this.loading = true; // 加载状态开始
      console.log("get teacher list");
      listTeacherStatistics(this.queryParams)
        .then((res) => {
          that.teacherList = res.rows;
          that.total = res.total;
          that.loading = false; // 加载状态结束
          that.finished = true; //提示列表加载完成
          console.log(" get  res", res);
          console.log("Teacherlist", res.rows);
        })
        .catch((error) => {
          console.log("get teacher data res", error);
          this.error = true; //提示列表加载出错点击重新加载
        });
    },
    paginationChange() {
      this.getTeacherList();
    },
    goToFirstPage() {
      this.queryParams.pageNum=1;
      this.getTeacherList();
    },
    goToLastPage() {
      this.queryParams.pageNum=this.total%this.queryParams.pageSize==0?this.total/this.queryParams.pageSize:Math.ceil(this.total/this.queryParams.pageSize);
      this.getTeacherList();
    },
    gotoStatisticsDetail(teacherId){
      this.$router.push({ path: "/dingding/statisticsDetail",
      query: {
          evalutionActivityId: this.queryParams.evalutionActivityId,
          teacherId: teacherId,
        },
      });
    },
    backToStatisticsList() {
      this.$router.push({ path: "/dingding/statisticsList" });
    },
  },
};
</script>

<style  rel="stylesheet/scss" lang="scss">
.teacherlist-main {
  height: 400px;
  overflow-y: scroll;
  width: 100%;
}
.van-nav-bar .van-icon {
  top: 5px;
}
.list-title {
  line-height: 20px;
  font-weight: bold;
  font-size: 12px;
  color: #1989fa;
}
.vo-list {
  margin: 0px auto;
  width: 95%;
  border-bottom: 2px dashed #eee;
}
.vo {
  display: flex;
  flex-direction: column;
}
.custom-title {
  font-size: 13pt;
  font-weight: bolder;
}
.teacher-info {
  width: 100%;
  overflow: hidden;
  font-size: 1rem;
  line-height: 20px;
  display: flex;
  flex-direction: row;
}

.teacher-info .NO {
  width: 40%;
}
.teacher-info .score_wrp {
  text-align: right;
  width: 60%;
}
.teacher-info .score_wrp .score{
  color: red;
  font-weight: bolder;
  margin: 0px 5px;
}
/**分页样式**/
.pagination-wrp{
  font-size: 14px;
  line-height: 40px;
  max-width: 1200px;
}
.pagination-wrp:first-child{
  text-align: right;
}
</style>
